Setting up the rotator
Since the visible news item
will change over time, we'll need a way to easily keep track of which
items are visible and where they are. First, we'll set two variables,
one for the currently visible headline and one for the headline that
has just scrolled out of view. Initially, both values will be 0.
var currentHeadline = 0, oldHeadline = 0;
Next, we'll take care of some initial positioning of the headlines. Recall that in the stylesheet we have already set the top property of the headlines to be 10 pixels greater than their container's height; because the container has an overflow property of hidden,
the headlines are initially not displayed. It'll be helpful later on if
we store that property in a variable, so that we can move headlines to
this position when needed.
var hiddenPosition = $container.height() + 10;
We also want the first headline to be visible immediately upon page load. To achieve this, we can set its top property to 0.
$('div.headline').eq(currentHeadline).css('top', 0);
The rotator area of the page is now in the correct initial state:
Finally, we'll store the
total number of headlines for later use and define a timeout variable
to be used for the pause mechanism between each rotation.
var headlineCount = $('div.headline').length;
var pause;
There is no need yet to give pause a value at this time; it will be set each time the rotation occurs. Nevertheless, we must always declare local variables using var to avoid the risk of collisions with global variables of the same name.
